<template>
<!--comment.wxml-->
<view class="container">
   <view class="nav-container">
      <view class="nav" :style="'width:' + width + 'rpx'">
        <block v-for="(item, index) in categories" :key="index">
          <navigator :class="'nav-item ' + (cat_id==item.cat_id?'red':'')" @tap="changeTab" :data-id="item.cat_id">{{item.cat_name}}</navigator>
        </block>
      </view> 
    </view>
    <view class="goods-container">
        <block v-for="(item, index) in list" :key="index">
           <navigator class="goods-box" :url="'/pages/news/news_detail/news_detail?article_id=' + item.article_id" v-if="item.type == 0" :style="'border-bottom:' + (index +1  == list.length ? 10 : 1) + 'rpx  solid #f3f3f3;'">         
                <navigator class="goods-desc" style="width:100%;">
                    <view class="goods-name ellipsis-1" style="height:60rpx;">{{ item.title }}</view>       
                    <view class="buy-time">浏览量:{{item.click}} 评论数: {{item.comment}} {{ item.time }} </view>
                </navigator>                                
            </navigator>

            <navigator class="goods-box" v-if="item.type == 1" :style="'border-bottom:' + (index +1  == list.length ? 10 : 1) + 'rpx  solid #f3f3f3;'" :url="'/pages/news/news_detail/news_detail?article_id=' + item.article_id">
                <navigator class="goods-img">
                    <image class="wh100" :src="item.thumb?url + item.thumb : resourceUrl"></image>
                </navigator>
                <navigator class="goods-desc">
                    <view class="goods-name ellipsis-1" style="height:60rpx;">{{ item.title }}</view>       
                    <view class="buy-time">浏览量:{{item.click}} 评论数: {{item.comment}} {{ item.time }} </view>
                </navigator>                                
            </navigator>

            <navigator class="goods-box" v-if="item.type == 2" :style="'border-bottom:' + (index +1  == list.length ? 10 : 1) + 'rpx  solid #f3f3f3;'" :url="'/pages/news/news_detail/news_detail?article_id=' + item.article_id">
                <navigator class="goods-img" style="float:right;">
                    <image class="wh100" :src="item.thumb?url + item.thumb : resourceUrl"></image>
                </navigator>
                <navigator class="goods-desc">
                    <view class="goods-name ellipsis-1">{{ item.title }}</view>       
                    <view class="buy-time">浏览量:{{item.click}} 评论数: {{item.comment}} {{ item.time }} </view>
                </navigator>                                
            </navigator>

            <navigator class="goods-box" v-if="item.type == 3" :style="'border-bottom:' + (index +1  == list.length ? 10 : 1) + 'rpx  solid #f3f3f3;'" :url="'/pages/news/news_detail/news_detail?article_id=' + item.article_id">
                  <navigator class="goods-img" style="width:100%;">
                    <image class="wh200" style="width:185rpx;height:160rpx;" :src="item.thumb?url + item.thumb : resourceUrl"></image>
                    <image class="wh200" style="width:185rpx;height:160rpx;" :src="item.thumb2?url + item.thumb2 : resourceUrl"></image>
                    <image class="wh200" style="width:185rpx;height:160rpx;" :src="item.thumb3?url + item.thumb3 : resourceUrl"></image>
                </navigator>
                <navigator class="goods-desc" style="width:100%;">
                    <view class="goods-name ellipsis-1">{{ item.title }}</view>       
                    <view class="buy-time mar-bottom">浏览量:{{item.click}} 评论数: {{item.comment}} {{ item.time }} </view>
                </navigator>                                
            </navigator>

             <navigator class="goods-box" v-if="item.type == 4" :style="'border-bottom:' + (index +1  == list.length ? 10 : 1) + 'rpx  solid #f3f3f3;'" :url="'/pages/news/news_detail/news_detail?article_id=' + item.article_id">
                
                <navigator class="goods-desc" style="width:100%;">
                    <view class="goods-name ellipsis-1" style="height:auto;">{{ item.title }}</view>  

                      <navigator class="goods-img mar-bottom" style="width:100%;">
                    <image class="wh200" style="width:160rpx;height:160rpx;" :src="item.thumb?url + item.thumb : resourceUrl"></image>
                    <image class="wh200" style="width:160rpx;height:160rpx;" :src="item.thumb2?url + item.thumb2 : resourceUrl"></image>
                    <image class="wh200" style="width:160rpx;height:160rpx;" :src="item.thumb3?url + item.thumb3 : resourceUrl"></image>
                </navigator>

                    <view class="buy-time mar-bottom">浏览量:{{item.click}} 评论数: {{item.comment}} {{ item.time }} </view>
                </navigator>                                
            </navigator>


        </block>
    </view>
    <view class="no-data" v-if="!list || list.length == 0">
        <view class="no-data-title goods-box">暂无新闻</view>
    </view>
</view>
</template>

<script>
// comment.js
var app = getApp();
import LoadMore from "../../../utils/LoadMore";
var load = new LoadMore();
var util = require("../../../utils/util.js");
var request = app.globalData.request;

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl + "/static/static/images/user68.jpg",
      categories: [],
      cat_id: 0,
      list: null,
      currentPage: 1,
      width: 875
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    this.getNewsCat();
    load.init(this, '', 'list');
  },
  onShow: function () {
    if (uni.getStorageSync('news:comment:update')) {
      uni.setStorageSync('news:comment:update', false);
      this.resetData();
      this.requestNewsList(this.cat_id);
    }
  },
  onReachBottom: function () {
    if (load.canloadMore()) {
      this.requestNewsList(this.cat_id);
    }
  },
  onPullDownRefresh: function (e) {
    this.resetData();
    this.requestNewsList(this.cat_id);
  },

  /**
  * 转发按钮
  */
  onShareAppMessage: function (res) {
    return {
      title: '资讯列表',
      //自定义转发标题
      path: '/pages/news/news_list/news_list?first_leader=' + uni.getStorageSync('app:userInfo')['user_id']
    };
  },
  methods: {
    getNewsCat: function () {
      var that = this;
      request.get('/Api/News/cat_list', {
        success: function (res) {
          that.setData({
            categories: res.data.result,
            width: 175 * res.data.result.length
          });
          that.requestNewsList(res.data.result.length > 0 ? res.data.result[0].cat_id : 0);
        }
      });
    },
    changeTab: function (e) {
      this.resetData();
      this.requestNewsList(e.currentTarget.dataset.id);
    },
    requestNewsList: function (cat_id) {
      var that = this;
      that.setData({
        cat_id: cat_id
      });
      var requestUrl = that.url + '/Api/News/newsList?cat_id=' + cat_id + '&page=' + that.currentPage;
      load.request(requestUrl, function (res) {
        that.currentPage++;
        uni.stopPullDownRefresh();
      });
    },

    /** 重置数据 */
    resetData: function () {
      this.list = null;
      this.currentPage = 1;
      load.resetConfig();
    }
  }
};
</script>
<style>
/* comment.wxss */
page{
    background-color:#fff;
}
.container {
    padding-bottom:0rpx;
}
.type-navbar{
    white-space: nowrap;
    display: flex;
    width: 100%;
    height:80rpx;
    background-color: #fff;
}
.type-box{
    width:33.3333333333%;
    box-sizing: border-box;
    font-size: 28rpx;
    line-height: 80rpx;
    padding: 0 20rpx;
    text-align: center;
    display: inline-block;
    overflow: hidden;
}
.type-navbar-item{
    border-bottom: 4rpx solid #fff;
}
.type-item-on{
  position: relative;
  color:#ff6a00;
  font-weight: bold;
}
.type-item-on::before{
  content: '';
  display: block;
  bottom: 0;
  position: absolute;
  width: 50rpx;
	height: 5rpx;
	background-color: #ff6a00;
  left: 76rpx;
}
.goods-container{
    margin: 10rpx 10rpx;
    background-color: #fff;
}
.goods-box{
    position: relative;
    font-size: 28rpx;
    overflow: hidden;
    border-bottom: 10rpx solid #f3f3f3;
}
.mar-bottom{
    margin-bottom:20rpx;
}
.goods-img{
    float:left; 
    height: 220rpx;
    width: 180rpx;
}
.goods-desc{
    float:left;
    width: 550rpx;
    padding: 20rpx 25rpx 0 40rpx;
    box-sizing: border-box;
}
.wh100{
    padding: 20rpx 25rpx 0 0rpx;
    height: 180rpx;
}
.wh200{
    padding: 20rpx 25rpx 0 25rpx;
    height: 180rpx;
}
.goods-name{
    height: 85rpx;
    line-height: 30rpx;
    overflow: hidden;
    white-space: normal;
    font-size: 26rpx;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    margin-bottom: 20rpx;
}
.buy-time{
    margin-top: 14rpx;
    font-size: 22rpx;
    color: #b3b3b3;
}
.comment-button{
    font-size: 22rpx;
    color: #ff3939;
    border: solid 1rpx #ff3737; 
    border-radius: 40rpx;
    padding: 5rpx 20rpx;
    position: absolute;
    right: 20rpx;
    bottom: 12rpx;
}
.check-evaluate{
  border: solid 1px #f3f3f3;
  color: #1c1c1c;
}
.change-order{
    color: #c2c2c2;
    border: 1rpx solid #f3f3f3;
}
.button-icon{
    height: 26rpx;
    width: 26rpx;
}
.c-specification{
  font-size: 22rpx;
  color: #999999;
}


.nav-container {
  overflow: scroll;
  height: 90rpx;
  background-color:#f4f5f6;

}
.nav {
  height: 90rpx;
}
.nav-container::-webkit-scrollbar {
  display: none;
}
.nav-item{
    float: left;
    width: 175rpx;
    height: 90rpx;
    line-height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    position: relative;
    text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;

}
.red{
    color: #ff6a00;
    position: relative
}
.red::after {
  content: "";
  width: 75rpx;
  height: 2px;
  border-radius: 1px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ff6a00;
}
</style>